import { deepFullCopy, messages } from "share/common";
import React from "react";
import { connect } from "react-redux";
import {
  Spin,
  Row,
  Col,
  Icon,
  message,
  Checkbox,
  Button,
  Popover,
  Radio,
} from "antd";
import Condition from "components/condition";
import "styles/components/template/didi-card-selector.scss";
// import "styles/loan-billing/repayment-content.scss";
import baseService from "share/base.service";
import moment from "moment";

const { If, Else } = Condition;

class DidiRecordSelector extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: true,
      consumptionRecords: [],
      page: 0,
      pageSize: 10,
      selectedSum: 0,
      hasMore: true,
      businessCardLoading: false,
      currentSelectRecord: [],
    };
  }

  componentDidMount() {
    this.getList();
  }

  getList = async () => {
    let { page, pageSize } = this.state;
    let pagination = {
      page,
      size: pageSize,
    };
    const {} = this.props;
    this.setState({ loading: true, currentSelectRecord: [] });
    let res = await baseService.getDiDiList(pagination, {
      userOID: this.props.ownerOID || "",
    });
    if (res.status === 200) {
      let records = res.data;
      this.setState(
        {
          consumptionRecords: records,
        },
        () => {
          this.initDiDiSelect();
        }
      );
    }
    this.setState({ loading: false });
  };
  initDiDiSelect = () => {
    const { consumptionRecords,currentSelectRecord } = this.state;
    const { didiOrderId } = this.props;
    if (didiOrderId && consumptionRecords) {
      let currentSelectRecord_ = consumptionRecords.filter(
        (item) => item.orderId == didiOrderId
      );
      currentSelectRecord.push(currentSelectRecord_[0])
      // this.setState({ currentSelectRecord: currentSelectRecord_ });
    }
  };
  handleOk = () => {
    let currentSelectRecord = this.state.currentSelectRecord;
    
    console.log(Object, 'Object');
    if (Object.keys(currentSelectRecord).length > 0) {
    let total = 0
    currentSelectRecord.forEach(i => {
      total += i.actualPrice
    })
    // currentSelectRecord = currentSelectRecord[0]
      currentSelectRecord.forEach(i => {
      i.total = total.toFixed(2)
    })
      this.props.onSelect(currentSelectRecord);
      this.setState({ currentSelectRecord: []});
    } else {
      message.error("请关联一笔滴滴消费");
    }
  };
  /**
   * 格式化数字
   * @param {Number} nStr 数字
   */
  addCommas = (nStr) => {
    nStr = Number(nStr || "0").toFixed(2);
    nStr = nStr + "";
    const x = nStr.split(".");
    let x1 = x[0];
    const x2 = x.length > 1 ? "." + x[1] : "";
    const rgx = /(\d+)(\d{3})/;
    while (rgx.test(x1)) {
      x1 = x1.replace(rgx, "$1,$2");
    }
    return x1 + x2;
  };
  selectHandle = (e) => {
    const { consumptionRecords,currentSelectRecord } = this.state;
      console.log(consumptionRecords, 'consumptionRecords');
    let a = []
    // a.push(currentSelectRecord_[0])
    let currentSelectRecord_ = consumptionRecords.filter(
      (item) => item.orderId == e.target.value
    );
    console.log(currentSelectRecord_,'currentSelectRecord_');
    if (e.target.value) {
      currentSelectRecord.push(currentSelectRecord_[0])
      // this.setState({ currentSelectRecord: currentSelectRecord_[0] });
    }
    console.log(currentSelectRecord,'currentSelectRecord');
  };
  render() {
    const {
      loading,
      consumptionRecords,
      hasMore,
      businessCardLoading,
    } = this.state;
    const { didiOrderId } = this.props;
    return (
      <div >
        {/* <Radio.Group
          
        > */}
          <Spin spinning={businessCardLoading}>
          <div>
                 {consumptionRecords.length > 0 ? (
              consumptionRecords.map((record, index) => {
                return (
                  <div key={record.orderId} className={"detailBlock"} >
                    {/* <Radio
                      style={{ position: "absolute", left: "8px", top: "7px" }}
                      value={record.orderId}
                    ></Radio> */}
                    <Checkbox
                      style={{ position: "absolute", left: "8px", top: "7px" }}
                      value={record.orderId}
                      onChange={this.selectHandle}
                      defaultValue={didiOrderId}
                      className="detailsContainer"
                    ></Checkbox>
                    
                    <div style={{ fontSize: "12px" }} className={"detailHead"}>
                      <div className="didiDetails">
                        <span className={"headText"}>交易金额：</span>
                        <span className={"headText"}>{"CNY"}</span>
                        <span className={"headText"}>
                          {this.addCommas(
                            Number(record.actualPrice || "0").toFixed(2)
                          )}
                        </span>
                      </div>
                      <div className="didiDetails">
                        <span className={"headText"}>交易日期：</span>
                        <span className={"headText"}>
                          {record.payTime
                            ? moment(record.payTime).format("YYYY-MM-DD")
                            : "-"}
                        </span>
                      </div>
                      <div className="didiDetails">
                        <span className={"headText"}>上车时间：</span>
                        <span className={"headText"}>
                          {record.departureTime
                            ? moment(record.departureTime).format(
                                "YYYY-MM-DD HH:mm:ss"
                              )
                            : "-"}
                        </span>
                        <span style={{ marginRight: "5px", marginLeft: "5px" }}>
                          |
                        </span>
                        <span className={"headText"}>下车时间：</span>
                        <span className={"headText"}>
                          {record.finishTime
                            ? moment(record.finishTime).format(
                                "YYYY-MM-DD HH:mm:ss"
                              )
                            : "-"}
                        </span>
                      </div>
                      <div className="didiDetails">
                        <span className={"headText"}>上车地点：</span>
                        <span className={"headText"}>
                          {record.actualStartName}
                        </span>
                      </div>
                      <div className="didiDetails">
                        <span className={"headText"}>下车地点：</span>
                        <span className={"headText"}>
                          {record.actualEndName}
                        </span>
                      </div>
                    </div>
                  </div>
                );
              })
            ) : !loading ? (
              <div className="no-business-card-consumption">这里空空如也</div>
            ) : null}
            {/* {loading ? (
              <div className="loading-footer">
                <Spin spinning={loading} />
              </div>
            ) : hasMore ? (
              <div className="loading-footer">
                <div onClick={this.getList}>
                  <Icon type="plus-square-o" />
                  &nbsp;&nbsp;{messages("components.key783")}
                </div>
              </div>
            ) : null} */}
          </div>
          </Spin>
        {/* </Radio.Group> */}
        <div className="slide-footer" style={{ textAlign: "left" }}>
          {/* <span style={{ fontWeight: "bold" }}>
              123
            </span> */}

          <div style={{ position: "absolute", left: "400px", top: "0px" }}>
            <Button
              onClick={() => this.handleOk()}
              type="primary"
              disabled={false}
            >
              {messages("common.ok") /*确定*/}
            </Button>
            <Button onClick={this.props.onCancel}>
              {messages("common.cancel") /*取消*/}
            </Button>
          </div>
        </div>
      </div>
    );
  }
}

DidiRecordSelector.propTypes = {
  onSelect: React.PropTypes.func.isRequired,
  onCancel: React.PropTypes.func,
  ownerOID: React.PropTypes.string, //费用归属人OID
  didiOrderId: React.PropTypes.string, //已关联的滴滴订单ID
};

function mapStateToProps(state) {
  return {
    user: state.login.user,
  };
}

export default connect(mapStateToProps)(DidiRecordSelector);
